<template>
  <div class="my-search-form">
    <!-- vxe 检索表单 -->
    <vxe-form :data="formData3" title-align="right" title-width="100" prevent-submit title-colon>
      <vxe-form-item title="名称" field="name" span="8" :item-render="{}" >
        <template v-slot>
          <!-- <vxe-input v-model="formData3.name" placeholder="请输入名称" clearable></vxe-input> -->
          <el-input
            placeholder="请输入内容2"
            v-model="formData3.name"
            size="small"
            clearable>
          </el-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="昵称" field="nickname" span="8" :item-render="{}" 
                     :title-prefix="{ message: '请输入汉字！', icon: 'fa fa-exclamation-circle' }">
        <template v-slot>
          <!-- <vxe-input v-model="formData3.nickname" placeholder="请输入昵称" clearable></vxe-input> -->
          <el-input
            placeholder="请输入内容2"
            v-model="formData3.nickname"
            size="small"
            clearable>
          </el-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="性别" field="sex" span="8" :item-render="{}" >
        <template v-slot>
          <!-- <vxe-select v-model="formData3.sex" placeholder="请选择性别" clearable>
            <vxe-option value="1" label="女"></vxe-option>
            <vxe-option value="2" label="男"></vxe-option>
          </vxe-select> -->
          <el-select v-model="formData3.sex" filterable placeholder="请选择" size="small">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="年龄" field="age" span="8" :item-render="{}" 
                     :title-prefix="{ message: '请输入数值！', icon: 'fa fa-info-circle' }">
        <template v-slot>
          <!-- <vxe-input v-model="formData3.age" type="integer" placeholder="请输入年龄" clearable></vxe-input> -->
          <el-input
            placeholder="请输入年龄"
            v-model="formData3.age"
            size="small"
            clearable>
          </el-input>
        </template>
      </vxe-form-item>
      <vxe-form-item title="状态" field="status" span="8" :item-render="{}" >
        <template v-slot>
          <!-- <vxe-select v-model="formData3.status" placeholder="请选择状态" clearable>
            <vxe-option value="0" label="失败"></vxe-option>
            <vxe-option value="1" label="成功"></vxe-option>
          </vxe-select> -->
          <el-select v-model="formData3.status" filterable placeholder="请选择" size="small">
            <el-option
              v-for="item in statusoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </template>
      </vxe-form-item>
      <vxe-form-item title="是否禁用" field="active" span="8" :item-render="{}" >
        <template v-slot>
          <!-- <vxe-switch v-model="formData3.active" open-label="是" close-label="否"></vxe-switch> -->
          <el-switch
            v-model="formData3.active"
            active-text="是"
            inactive-text="否">
          </el-switch>
        </template>
      </vxe-form-item>
      <vxe-form-item title="体重" field="weight" span="8" :item-render="{}"  folding>
        <template v-slot>
          <!-- <vxe-input v-model="formData3.weight" type="number" placeholder="请输入体重" clearable></vxe-input> -->
            <el-input-number size="small" v-model="formData3.weight"></el-input-number>
        </template>
      </vxe-form-item>
      <vxe-form-item title="日期" field="date" span="8" :item-render="{}"  folding>
        <template v-slot>
          <!-- <vxe-input v-model="formData3.date" type="date" placeholder="请选择日期" clearable></vxe-input> -->
          <el-date-picker
            v-model="formData3.date"
            type="date"
            size="small"
            placeholder="选择日期">
          </el-date-picker>

        </template>
      </vxe-form-item>
      <vxe-form-item title="是否单身" field="single" span="8" :item-render="{}"  folding>
        <template v-slot>
          <!-- <vxe-radio-group v-model="formData3.single">
            <vxe-radio label="1">是</vxe-radio>
            <vxe-radio label="0">否</vxe-radio>
          </vxe-radio-group> -->
          <el-radio-group v-model="formData3.single" size="small">
            <el-radio :label="1">备选项1</el-radio>
            <el-radio :label="2">备选项2</el-radio>
          </el-radio-group>
        </template>
      </vxe-form-item>
      <vxe-form-item title="兴趣爱好" field="flagList" span="8" :item-render="{}"  folding>
        <template v-slot>
          <!-- <vxe-checkbox-group v-model="formData3.flagList">
            <vxe-checkbox label="1">爬山</vxe-checkbox>
            <vxe-checkbox label="2">跑步</vxe-checkbox>
            <vxe-checkbox label="3">听歌</vxe-checkbox>
          </vxe-checkbox-group> -->
          <el-checkbox-group v-model="formData3.flagList" size="small"> 
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
          </el-checkbox-group>
        </template>
      </vxe-form-item>
      <vxe-form-item align="center" span="24" collapse-node>
        <template v-slot>
          <vxe-button status="primary" @click="searchEvent">搜索</vxe-button>
          <vxe-button @click="resetEvent">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

//导入下拉容器组件-多选
import SearchFormDropdContDemoItem from './SearchFormItem/SearchFormDropdContDemoItem'
//导入下拉容器组件-单选
import SearchFormDropdContDemoradioItem from './SearchFormItem/SearchFormDropdContDemoradioItem'

export default {
  name: 'searchForm',
  components: {
    SearchFormDropdContDemoItem,
    SearchFormDropdContDemoradioItem
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {
      formData3: {
        name: '',
        nickname: '',
        sex: '选项1',
        age: 30,
        status: '1',
        weight: null,
        date: null,
        active: false,
        single: '1',
        flagList: []
      },
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        statusoptions: [{
          value: '0',
          label: '失败'
        }, {
          value: '1',
          label: '成功'
        }]
    }
  },
  props: {
    formSearchData: {
      type: Object,
      default: function () {
        return {
          name: '',
          searchDate: '',
          dtValue: '',
          dtValue2: '',
          cascaderDemo: '',
          // remark: '',
          // timestamp: new Date(),
          // title: '',
          // status: 'published',
          // type: ''
        }
      }
    },
    cascaderDemoOptions: {
      type: Array,
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    formSearchDataCom: {
      get() {
        return this.formSearchData
      },
      set(val) {
        this.$emit('update:formSearchData', val)
      }
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    searchEvent() {
      // alert('searchEvent')
      this.$emit('searchEventEmit')
    },
    resetSearchEvent() {
      // alert('resetSearchEvent')
      this.$emit('resetSearchEventEmit')
    },

    // 下拉容器
    dtValueChangeEmit(value) {
      this.formSearchDataCom.dtValue = value;
      console.log(this.formSearchDataCom);
    },
    // 下拉容器-单选
    dtValueChangeEmit2(value) {
      this.formSearchDataCom.dtValue2 = value;
      console.log(this.formSearchDataCom);
    },
    // 
    caseChange(node) {
      console.log('caseChangecaseChangecaseChange', node);
    }


  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

.my-search-form{
  ::v-deep {
    .vxe-form.size--mini .vxe-form--item-inner {
      min-height: 32px;
    }
  }
}




</style>